import { useEffect, useState } from 'react'
import { MODELS_OBJ } from './constants'
import './css/infoHead.less'

/* 
info = object
info.case = 显示不显示 内容 = 展开 收起功能
*/
const InfoHead = ({ info, handleHeightChange = undefined }) => {
  const [isExpanded, setIsExpanded] = useState(false)
  const toggleExpand = () => {
    setbuttonText(isExpanded ? '展开' : '收起')
    setIsExpanded(!isExpanded)
    setTimeout(() => {
      if (handleHeightChange) {
        const element = document.querySelector('.filelib-base-head')
        const height = element?.clientHeight || 136
        const validHeight = height >= 136 ? height : 136
        handleHeightChange(validHeight)
      }
    }, 0)
  }
  const [visibleText, setvisibleText] = useState('')
  const [buttonText, setbuttonText] = useState('')
  useEffect(() => {
    if (info.foutName && info.case) {
      const element = document.querySelector('.classId_sise')
      const fontSize = parseFloat(window.getComputedStyle(element).fontSize)
      const charWidthEstimate = fontSize
      const containerWidth = element?.clientWidth || 0
      const visibleTextLength = Math.floor(containerWidth / charWidthEstimate)
      if (element && info?.case?.length > visibleTextLength) {
        setvisibleText(isExpanded ? info.case : info.case.substring(0, visibleTextLength - 3) + '...')
        setbuttonText(isExpanded ? '收起' : '展开')
      } else {
        setvisibleText(info.case)
      }
    } else {
      setvisibleText(info.case)
    }
  }, [info.case])

  return (
    <div className="flexCol case filelib-base-head px-[16px]">
      <span className="title">{info.name}</span>
      {info && Array.isArray(info.list) ? (
        <div className="flexRowStart widthAll">
          {info.list.map(event => {
            return (
              <div key={event.name} className="flexRowStart marRigCase">
                <span className="titleDesc">{event.name}</span>
                <span className="titleDesc_cont marLeft">
                  {event.name === '模型' ? MODELS_OBJ[event.desc] || event.desc : event.desc}
                </span>
              </div>
            )
          })}
        </div>
      ) : null}
      {info.foutName ? (
        <div className="flexRowStart fouterCase">
          <span className="titleDesc">{info.foutName}</span>
          <div className={isExpanded ? 'flexRowStart postCase padBot' : 'flexRowStart postCase flexRowJustBet'}>
            <div
              className={
                isExpanded
                  ? ' caseOverFlowY caseOverFlowY_width  CollapsibleText titleDesc_cont fouter_hid marLeft '
                  : 'overHidScrol classId_sise CollapsibleText titleDesc_cont fouter_hid marLeft'
              }
            >
              {isExpanded ? info.case : visibleText}
            </div>
            <span
              onClick={toggleExpand}
              className={
                isExpanded
                  ? 'allPostcur cursonCase flexRowStart CollapsibleText_btn'
                  : 'cursonCase flexRowStart CollapsibleText_btn'
              }
            >
              {buttonText}
              {buttonText ? (
                isExpanded ? (
                  <svg
                    className="svgMar"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M3 11L8 6L13 11"
                      stroke="#062FF8"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                ) : (
                  <svg
                    className="svgMar"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M3 6L8 11L13 6"
                      stroke="#062FF8"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                )
              ) : null}
            </span>
          </div>
        </div>
      ) : null}
    </div>
  )
}

export default InfoHead
